<template>
    <el-dialog :title="dialogType == 'add' ? '新增角色' : '编辑角色'" v-model="dialogVisible" :before-close="handleClose"
        :close-on-click-modal="false" top="10vh" width="40%">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="角色编码:" prop="roleCode">
                <el-input v-model="form.roleCode" placeholder="请输入" type="text" clearable></el-input>
            </el-form-item>
            <el-form-item label="角色名称:" prop="name">
                <el-input v-model="form.name" placeholder="请输入" type="textarea" clearable></el-input>
            </el-form-item>
            <el-form-item label="状态:" prop="status">
                <el-switch v-model="form.status" active-text="正常" inactive-text="停用" active-value="1"
                    inactive-value="0" />
            </el-form-item>
            <el-form-item label="描述:" prop="remark">
                <el-input v-model="form.remark" placeholder="请输入" type="textarea" clearable></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetClick()">重置</el-button>
            <el-button type="primary" :loading="btnLoading" @click="submitClick(formRef)">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { addRule, updateRule } from "@/api/sys/roleApi.ts";
import { ElMessage } from 'element-plus';
import { delNullProperty } from '@/utils';
const formRef = ref<FormInstance>();
const rules = reactive<FormRules>({
    roleCode: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
    name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
    status: [{ required: true, message: '请输入状态', trigger: 'change' }],
})
const emit = defineEmits(['searchTable'])

const btnLoading = ref(false);
const dialogVisible = ref(false);
const dialogType = ref('');
const form = ref({
    id: null,
    roleCode: '',
    name: '',
    remark: '',
    status: '1'
})

const openLoad = (type: string, data: any) => {
    dialogVisible.value = true;
    dialogType.value = type;
    if (type == "add") {
        form.value.roleCode = '';
        form.value.name = '';
        form.value.remark = '';
    } else {
        form.value.id = data.id;
        form.value.roleCode = data.roleCode;
        form.value.name = data.name;
        form.value.remark = data.remark;
        form.value.status = data.status;
    }
}
const submitClick = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    btnLoading.value = true;
    setTimeout(() => {
        btnLoading.value = false;
    }, 5000);
    formEl.validate(async (valid) => {
        if (valid) {
            try {
                const data = {
                    ...delNullProperty(form.value)
                }
                const res = dialogType.value == 'add' ? await addRule(data) : await updateRule(data)
                if (res.code == 200) {
                    btnLoading.value = false;
                    dialogVisible.value = false;
                    ElMessage.success("操作成功！");
                    emit('searchTable')
                } else {
                    ElMessage.error(res.message);
                }
            } catch (error) {
                ElMessage.error("未知错误，请联系管理员！");
            }
        } else {
            console.log('error submit!')
            btnLoading.value = false
            return false;
        }
    })
}
const resetClick = () => {
    if (formRef.value) {
        formRef.value.resetFields();
    } else {
        form.value.roleCode = '';
        form.value.name = '';
        form.value.remark = '';
        form.value.status = '1';
        form.value.id = null;
    }

}
const handleClose = () => {
    resetClick()
    dialogType.value = '';
    dialogVisible.value = false;
    btnLoading.value = false;
}
defineExpose({
    openLoad
})
</script>